/**
 * This shows an example of a common shopping cart checkout form. It demonstrates uses
 * of FieldContainer and various layouts for arranging and aligning fields, ComboBox
 * fields for state and month selection, and listening to change events to automatically
 * copy values from Mailing Address to Billing Address fields.
 */
Ext.define('Siga.view.general.VDatosEstudiante', {
    extend: 'Ext.form.Panel',
    alias: 'widget.checkout',
    xtype: 'form-checkout',
    frame: true,
    //title: 'Complete Check Out',
    bodyPadding: 5,

//    otherContent: [{
//        type: 'Data',
//        path: 'app/data/DataSets.js'
//    }],
    initComponent: function(){
//        var states = new Ext.data.Store({
//            model: UptaebFrontEnd.model.State,
//            proxy: {
//                type: 'memory',
//                reader: {
//                    type: 'array'
//                }
//            },
//            data: UptaebFrontEnd.data.DataSets.states
//        }),
//        billingStates = new Ext.data.Store({
//            model: UptaebFrontEnd.model.State,
//            proxy: {
//                type: 'memory',
//                reader: {
//                    type: 'array'
//                }
//            },
//            data: UptaebFrontEnd.data.DataSets.states
//        });

        Ext.apply(this, {
            //width: 550,
            fieldDefaults: {
                labelAlign: 'right',
                labelWidth: 80,
                msgTarget: Ext.supports.Touch ? 'side' : 'qtip'
            },

            items: [{
                xtype: 'fieldset',
                title: 'Datos Personales',
                defaultType: 'textfield',
                layout: 'anchor',
                defaults: {
                    anchor: '100%',
                    margin: '4 0 4 0',
                },
                items: [{
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Documento de Identidad',
                    layout: 'hbox',
                    cls: 'colorize',
                    combineErrors: true,
                    defaultType: 'textfield',
                    defaults: {
                        hideLabel: 'true',
                        margin: '4 0 4 0',
                        width: '50%',
                        height: 30,
                    },
                    items: [{
                        name: 'documentoIdentidad',
                        fieldLabel: 'Documento de Identidad',
                        emptyText: 'Cédula o Pasaporte',
                        allowBlank: false,
                        disabled: true
                    }]
                },{
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Nombre',
                    layout: 'vbox',
                    combineErrors: true,
                    defaultType: 'textfield',
                    defaults: {
                        hideLabel: 'true',
                        margin: '4 0 4 0',
                        width: '100%',
                        height: 30,
                    },
                    items: [{
                        name: 'Nombres',
                        fieldLabel: 'Nombres',
                        emptyText: 'Nombres',
                        allowBlank: false,
                        disabled: true
                    }, {
                        name: 'Apellidos',
                        fieldLabel: 'Apellidos',
                        emptyText: 'Apellidos',
                        allowBlank: false,
                        disabled: true
                    }]
                }]
            },{
                xtype: 'fieldset',
                title: 'Datos de Contacto',
                defaultType: 'textfield',
                layout: 'anchor',
                defaults: {
                    anchor: '100%',
                    margin: '4 0 4 0',
                },
                items: [{
                    xtype: 'container',
                    layout: 'hbox',
                    defaultType: 'textfield',
                    margin: '4 0 4 0',
                    defaults: {
                        margin: '4 0 4 0',
                        height: 30,
                    },
                    items: [{
                        fieldLabel: 'Correo Electronico',
                        name: 'email',
                        vtype: 'email',
                        flex: 1,
                        allowBlank: false
                    }, {
                        fieldLabel: 'Telefono',
                        labelWidth: 100,
                        name: 'telefono',
                        width: 200,
                        emptyText: 'xxxx-xxxxxxx',
                        maskRe: /[\d\-]/,
                        regex: /^\d{4}-\d{7}$/,
                        regexText: 'Debe estar en el formato xxxx-xxxxxxx'
                    }]
                }]
            }, {
                xtype: 'fieldset',
                title: 'Datos Academicos',
                defaultType: 'textfield',
                layout: 'anchor',
                defaults: {
                    anchor: '100%',
                    margin: '4 0 4 0',
                },
                items: [{
                    xtype: 'fieldcontainer',
                    fieldLabel: 'PNF',
                    layout: 'hbox',
                    combineErrors: true,
                    defaultType: 'textfield',
                    defaults: {
                        hideLabel: 'true',
                        margin: '4 0 4 0',
                        height: 30,
                    },
                    items: [{
                        name: 'pnf',
                        fieldLabel: 'PNF',
                        flex: 1,
                        allowBlank: false,
                        disabled: true,
                        disabled: true,
                    listeners: {
                        scope: this,
                        change: this.onMailingAddrFieldChange
                    },
                    billingFieldName: 'billingStreet',
                    }]
                }, {
                    xtype: 'container',
                    layout: 'hbox',
                    defaultType: 'textfield',
                    margin: '4 0 4 0',
                    defaults: {
                        margin: '4 0 4 0',
                        height: 30,
                    },
                    items: [{
                        name: 'trayecto',
                        fieldLabel: 'Trayecto',
                        vtype: 'trayecto',
                        width: 10,
                        flex: 1.5,
                        allowBlank: false,
                        disabled: true,
                    }, {
                        name: 'turno',
                        fieldLabel: 'Turno',
                        labelWidth: 40,
                        vtype: 'turno',
                        width: 40,
                        flex: 2,
                        disabled: true,
                    }, {
                        fieldLabel: 'Unidades de Credito Aprobadas',
                        labelWidth: 180,
                        name: 'unidadesCreditosA',
                        vtype: 'unidadesCreditosA',
                        width: 10,
                        flex: 3.25,
                        disabled: true,
                    },{
                        fieldLabel: 'Unidades de Credito Faltantes',
                        labelWidth: 180,
                        name: 'unidadesCreditosF',
                        vtype: 'unidadesCreditosF',
                        width: 10,
                        flex: 3.25,
                        disabled: true,
                    }]
                }]
            }],

        buttons: [{
            text: 'Reset',
            scope: this,
            handler: this.onResetClick
        }, {
            text: 'Complete Purchase',
            width: 150,
            scope: this,
            handler: this.onCompleteClick
        }]
        });
        this.callParent();
    },

    onResetClick: function(){
        this.getForm().reset();
    },

    onCompleteClick: function(){
        var form = this.getForm();
        if (form.isValid()) {
            Ext.MessageBox.alert('Submitted Values', form.getValues(true));
        }
    },

    onMailingAddrFieldChange: function(field){
        var copyToBilling = this.down('[name=billingSameAsMailing]').getValue(),
            copyField = this.down('[name=' + field.billingFieldName + ']');

        if (copyToBilling) {
            copyField.setValue(field.getValue());
        } else {
            copyField.clearInvalid();
        }
    },
});


